<!DOCTYPE HTML>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<script type="text/javascript" th:src="@{/static/lib/html5shiv.js}"></script>
	<script type="text/javascript" th:src="@{/static/lib/respond.min.js}"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui/css/H-ui.min.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/H-ui.admin.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/lib/Hui-iconfont/1.0.8/iconfont.css}" id="skin" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/style.css}" />
	<script type="text/javascript" th:src="@{/static/lib/DD_belatedPNG_0.0.8a-min.js}" ></script>
	<script th:src="@{/static/lib/vue.min.js}"></script>
	<script>DD_belatedPNG.fix('*');</script>
	<title>教学资料</title>
	<link th:href="@{/static/lib/webuploader/0.1.5/webuploader.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
	<form class="form form-horizontal" id="form-article-add"  method="post" th:action="@{/course/addCourse}" enctype="multipart/form-data" >
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>课程标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="courseName" id="courseName" placeholder="请输入课程名称" required="required">
			</div>
		</div>

		<div class="row cl" id="type">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>一级分类：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
			    <select name="typeId" id="typeId" class="select" onchange="sel(this.options[this.options.selectedIndex].value)" required="required">
                    <option value="0">---请选择---</option>
					<option v-for="(item,index) in result" :value="item.typeId">{{item.typeName}}</option>
				</select>
				</span>
			</div>
		</div>
		<div class="row cl" id="subject">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>二级分类：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
				<select name="subjectId" id="subjectId" class="select" required="required" >
                    <option v-for="(item,index) in result" :value="item.subjectId">{{item.subjectName}}</option>
				</select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">是否收费：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<span class="select-box">
				<select name="courseState" onchange="isfree()" id="courseState" class="select" onclick="isfree()">
					<option value="0">是</option>
					<option value="1">否</option>
				</select>
				</span>
			</div>
		</div>

		<div class="row cl show">
			<label class="form-label col-xs-4 col-sm-2">课程价格：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="coursePrice" id="coursePrice" placeholder="请输入课程价格" >
			</div>
		</div>

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">课程封面：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="file" name="file"  required="required" onblur="getFile(file)">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">课程介绍：</label>
			<div class="formControls col-xs-8 col-sm-9">
                <textarea name="courseIntroduction"  id="courseIntroduction" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符"
						  datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"
						  onKeyUp="$.Huitextarealength(this,200)"  required="required"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
</div>


<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{/static/lib/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/static/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/additional-methods.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/webuploader/0.1.5/webuploader.min.js}"></script>
<script type="text/javascript">

	function WhetherPrice(obj){
		console.log(obj)
	}
	function article_save(){
		alert("刷新父级的时候会自动关闭弹层。")
		window.parent.location.reload();
	}

	var app = new Vue({
		el: '#type',
		data: {
			result: []
		}
	});
	var subject = new Vue({
		el: '#subject',
		data: {
			result: []
		}
	});


	/*根据一级分类获取二级分类*/
	function sel(obj) {
		$.ajax({
			url: "/subject/getSubject",
			type: "post",
			dataType: "json",
			data: {
				typeId: obj
			},
			success: function (data) {
				subject.result = data;
				console.log(subject.result)
			}
		})
	}

	$(function(){
		/*获取一级分类列表*/
		var getAllType = function () {
			$.ajax({
				type: "post",
				dataType: "json",
				url: "/type/getAllType",
				success: function (data) {
					app.result = data;
				}
			})
		}
		getAllType()
	});
	//是否收费
  	function isfree() {
	    var  courseState=$.trim($('#courseState').val());
	        console.log(courseState)
        if (courseState=='0'){
            $("#coursePrice").attr("required","required")
			$(".show").css({
				"display":"block"
			})
        }
        if (courseState=='1'){
            $("#coursePrice").removeAttr("required")
			$(".show").css({
				"display":"none"
			})
        }
    }
    isfree()

	function showErrorMsg(msg){
		alert(msg);
	}
	function getFile(file) {

		/*（1）判断文件后缀类型*/
		var strs = new Array(); //定义一数组
		//  var pic1 = $("#file").val(); //获取input框的值，文件路径
		var pic1 = $(file).val(); //获取input框的值，文件路径
		strs = pic1.split('.'); //分成数组存储
		var suffix = strs[strs.length - 1]; //获取文件后缀

		if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg'&& suffix != 'png')
		{
			showErrorMsg('您选择的不是图片，请上传一个图片！')
			return false;//不是图片，做处理
		}

		/*(2)获取文件大小，以Kb为单位*/
		fileSize = file.files[0].size / 1024;
		if (fileSize > 10000) {
			showErrorMsg('您上传的大于10M，请换一个！')
			return false;//不是图片，做处理
		}

	}

</script>
</body>
</html>